<template>
  <div class="summary-outline-wrap">
    <div class="summary-outline-btn">
      <div class="outline-btn-edit">
        <span v-show="!isEdit" class="mr20" @click="editHandler">编辑</span>
        <p class="mr20" v-show="isEdit">
          <!-- <span class="mr20" @click="saveHandler">保存</span> -->
          <span @click="cancelHandler">取消</span>
        </p>
      </div>
      <span class="export-btn" v-pdf="{ el: 'item-summary-p2', title: '车辆信息' }">导出</span>
      <!-- <div class="print" v-print="{ el: `#gf`, popTitle: '定制信息' }">打印</div> -->
    </div>
    <div class="item-summary-p2">
      <div class="summary-outline-title">车辆信息</div>
      <div id="gf">
        <div class="summary-outline-content">
          <Info :detail="detail" />
          <div class="summary-outline-table">
            <div class="summary-outline-table-title">
              <span> 车辆信息</span>
              <span @click="addAgvFn" v-show="isEdit">
                <i><Plus /></i>
                <i>添加车辆</i>
              </span>
            </div>
            <Table class="task-table" :data="detail.productModels" :columns="tableDefault.columns">
              <template #action="scope" v-if="isEdit">
                <span class="task-table-del" @click="deleteAgv(scope.scope)">删除</span>
              </template>
            </Table>
          </div>
        </div>
      </div>
    </div>

    <div v-if="drawerVisible">
      <Dialog v-model:drawerVisible="drawerVisible" v-model:config="config" :project-id="projectId" @change="refresh" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, inject, onMounted } from "vue";
import Table from "@/components/Table/index.vue";
import { TableProps } from "@/components/Table/interface";
import Info from "./Info.vue";
// import { ElMessage } from "element-plus";
import mittBus from "@/utils/mittBus";
import { addProjectProduct, deleteProjectProduct } from "@/api/modules/project";
import Dialog from "../../../components/Dialog.vue";
import { getListProductUnbound } from "@/api/modules/agv";
import { useHandleData } from "@/hooks/useHandleData";
// 变量
defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
});
const projectId = inject("projectId");
const isEdit = ref(false);
let drawerVisible = ref(false);
let agvList = ref<any>([]);
let config = ref<any>({
  width: 24
});
const tableDefault: TableProps = reactive({
  data: [],
  columns: [
    {
      type: "index",
      title: "序号",
      key: "",
      width: 48
    },
    {
      title: "车辆编号",
      key: "code"
    },
    {
      title: "车型",
      key: "productCategoryName"
    },
    {
      title: "车架号",
      key: "serialNumber"
    },
    {
      title: "车辆名称",
      key: "name"
    },
    {
      title: "备注",
      key: "remark"
    }
  ]
});
// 方法
/**
 * AGV信息
 */
const getListProductUnboundFn = async () => {
  const { data } = await getListProductUnbound();
  agvList.value = data;
  console.log(agvList.value);
};
const editHandler = () => {
  isEdit.value = true;
  tableDefault.columns.push({
    title: "操作",
    key: "action",
    width: 80
  });
};
const cancelHandler = () => {
  tableDefault.columns.splice(tableDefault.columns.length - 1, 1);
  isEdit.value = false;
};
// const saveHandler = async () => {
//   try {
//     // await updateProjectSoftware(softWare.value);
//     mittBus.emit("ProjectRefresh");
//     isEdit.value = false;
//     ElMessage.success("保存成功");
//   } catch (e) {
//     console.log(e);
//   }
// };
const addAgvFn = () => {
  drawerVisible.value = true;
  config.value.title = "添加车辆";
  config.value.form = {
    formData: {
      projectId,
      productId: "",
      code: ""
    },
    rules: {
      productId: [{ required: true, message: "请选择车辆" }],
      code: [{ required: true, message: "请填写车辆编号" }]
    }
  };
  config.value.column = [
    {
      type: "select",
      key: "productId",
      formItemAttribute: {
        label: "车辆"
      },
      attributes: {
        placeholder: "请选择车辆",
        options: agvList.value,
        multiple: false,
        filterable: true,
        clearable: true
      }
    },
    {
      type: "input",
      key: "code",
      formItemAttribute: {
        label: "车辆编号"
      },
      attributes: {
        placeholder: "请填写车辆编号"
      }
    },
    {
      type: "input",
      key: "remark",
      formItemAttribute: {
        label: "备注"
      },
      attributes: {
        placeholder: "请填写备注"
      }
    }
  ];
  config.value.api = addProjectProduct;
  config.value.transformData = data => {
    return [data];
  };
  config.value.message = "添加成功";
};
const refresh = () => {
  mittBus.emit("ProjectRefresh");
};
const deleteAgv = async row => {
  await useHandleData(deleteProjectProduct, { id: row.id }, "删除成功");
  refresh();
};
onMounted(() => {
  getListProductUnboundFn();
});
</script>
<style lang="scss" scoped>
.summary-outline-wrap {
  box-sizing: border-box;
  min-height: 100%;
  padding: 20px;
  background: #ffffff;
  p {
    margin: 0;
  }
  i {
    font-style: normal;
  }
  .mr20 {
    margin-right: 20px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .summary-outline-btn {
    display: flex;
    justify-content: flex-end;
    font-size: 16px;
    font-weight: 400;
    color: var(--el-color-primary);
    cursor: pointer;
    .outline-btn-edit {
      display: flex;
    }
  }
  .summary-outline-title {
    margin-top: 12px;
    margin-bottom: 60px;
    font-size: 26px;
    font-weight: 600;
    color: #333333;
    text-align: center;
  }
  .summary-outline-content {
    margin: 0 $project-padding;
  }
  .summary-outline-table {
    overflow: hidden;
    :deep(.task-table) {
      .wik-table-header {
        background: $project-background;
      }
      .task-table-del {
        cursor: pointer;
        &:hover {
          color: #ff0000;
        }
      }
    }
    &-title {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      span:first-child {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }
      span:last-child {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        cursor: pointer;
        i:first-child {
          width: 15px;
          height: 15px;
          margin-right: 2px;
          font-size: 15px;
          color: #666666;
        }
      }
      &:hover {
        span:last-child {
          color: $primary-color;
          i {
            color: $primary-color;
          }
        }
      }
    }
    &-content {
      ul,
      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }
    }
    .table-content-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      li {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 400;
        span:first-child {
          margin-right: 10px;
          color: #666666;
        }
        span:last-child {
          color: #333333;
        }
      }
    }
  }
  .summary-outline-other {
    margin-top: 30px;
  }
}
</style>
